<template>
  <div>
    <h1>Message信息提示</h1>
    <hr>
    <el-button :plain="true" @click="open1">成功</el-button>
    <el-button :plain="true" @click="open2">警告</el-button>
    <el-button :plain="true" @click="open3">消息</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
    <hr>
    <h1>Notification 通知</h1>
    <p>悬浮出现在页面角落，显示全局的通知提醒消息</p>
    <el-button
        plain
        @click="open5">
        成功
    </el-button>
    <el-button
        plain
        @click="open6">
      警告
    </el-button>
    <el-button
        plain
        @click="open7">
      消息
    </el-button>
    <el-button
        plain
        @click="open8">
      错误
    </el-button>
  </div>
</template>


<script>
export default {
  name: "MessageView",
  methods: {
    open1() {
      // this.$message.success('这是一个成功信息提示')
      this.$message({
        type: "success",
        message: '这是一个成功信息提示',
        onClose: () => {  //  信息提示结束后 回调
          this.$message('弹窗关闭了')
        }
      })
    },
    open2() {
      this.$message.warning('这是一个警告信息提示')
    },
    open3() {
      // this.$message.info('这是一个普通信息提示')
      this.$message('这是一个普通信息提示')
    },
    open4() {
      this.$message.error('这是一个错误信息提示')
    },
    open5() {
        this.$notify({
          title:'信息',
          message:'这是一条成功信息',
          type:'success',
          showClose:false,   // 隐藏关闭按钮
        })
    },
    open6() {
        this.$notify.warning('这是一个警告信息')
    },
    open7() {
      this.$notify.info('这是一个普通信息')
    },
    open8() {
      this.$notify.error('这是一个错误信息')
    }

  }
}
</script>


<style scoped>

</style>
